<template>
	<div class="flex">
		<!-- 我的订单-信息begin -->
		<h3>订单信息</h3>
		<div class="child_flex">
			<div class="left_img">
				<img src="@/assets/images/加.png" alt="" />
			</div>
			<strong>订单号</strong>
			<div class="right_text">
				<span>123456789</span>
			</div>
		</div>
		<div class="child_flex">
			<div class="left_img">
				<img src="@/assets/images/加.png" alt="" />
			</div>
			<strong>哈默新江菜</strong>
			<div class="right_text dishes_Text">
				<span>酸菜鱼，米饭，可乐，酸辣土豆丝</span>
			</div>
		</div>
		<div class="child_flex">
			<div class="left_img">
				<img src="@/assets/images/加.png" alt="" />
			</div>
			<strong>送餐地址</strong>
			<div class="right_text mealDeliveryAddress_Text">
				<span>广西省玉林市玉东新区教育东路1303号</span>
			</div>
		</div>
		<div class="child_flex border_botom">
			<div class="left_img">
				<img src="@/assets/images/加.png" alt="" />
			</div>
			<strong>食材偏好</strong>
			<div class="right_text ingredientsPreference_Text">
				<span>已配备</span>
			</div>
		</div>
		<!-- 我的订单-信息end -->

		<!-- 我的订单-菜单价格明细begin -->
		<strong class="price_Text">菜单价格明细</strong>
		<div class="child_flex price_Hight">
			<strong>酸菜鱼</strong>
			<div class="right_text">￥&ensp;<span>28.5</span></div>
		</div>
		<div class="child_flex price_Hight">
			<strong>酸辣土豆丝</strong>
			<div class="right_text">￥&ensp;<span>6.0</span></div>
		</div>
		<div class="child_flex price_Hight">
			<strong>米饭</strong>
			<div class="right_text">￥&ensp;<span>2.0</span></div>
		</div>
		<div class="child_flex border_botom">
			<strong>可乐</strong>
			<div class="right_text">￥&ensp;<span>0.0</span></div>
		</div>
		<!-- 我的订单-菜单价格明细end -->

		<!-- 我的订单-总计begin -->
		<div class="child_flex">
			<div class="left_img">
				<img src="@/assets/images/加.png" alt="" />
			</div>
			<strong class="total_price_Strong">总计</strong>
			<div class="total_price_Money">￥<span>42.50</span></div>
		</div>
		<!-- 我的订单-总计end -->
	</div>
</template>

<script>
export default {
	name: 'OrderIngredientsInformation',
};
</script>

<style scoped>
.flex {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 10px 26px 12px 26px;
	padding: 15px 20px 16px 22px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}
.flex > h3 {
	height: 25px;
	color: #3c454b;
	font-family: Noto Sans SC;
	font-size: 20px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.25714290142059326px;
	text-align: left;
	flex: 1;
}
/* 我的订单-信息begin */
.child_flex {
	display: flex;
	height: auto;
	margin-top: 15px;
}

.child_flex > strong {
	height: 36px;
	color: #3c454b;
	font-family: Noto Sans SC;
	font-size: 12px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0px;
	text-align: left;
	flex: 1;
}

.left_img > img {
	width: 15.73px;
	height: 20px;
	top: 171px;
	left: 43px;
	box-sizing: border-box;
	border-radius: 2px;
	vertical-align: middle;
	margin-right: 10px;
}

.right_text {
	display: inline-block;
	width: 69px;
	color: rgb(110, 124, 135);
	font-family: Noto Sans SC;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	text-align: right;
	/* 换行 */
	word-break: break-all;
}
.dishes_Text {
	width: 121px;
}
.mealDeliveryAddress_Text {
	width: 133px;
}
.ingredientsPreference_Text {
	width: 40px;
}
.border_botom {
	border-bottom: 1px solid rgb(229, 237, 242);
	margin-bottom: 15px;
}
/* 我的订单-信息end */

/* 我的订单-菜单价格明细begin */
.price_Text {
	color: rgb(60, 69, 75);
	font-size: 12px;
	line-height: 18px;
	text-align: left;
}
.price_Hight > strong {
	height: 0;
}
/* 我的订单-菜单价格明细end */

/* 我的订单-总计begin */
.child_flex > .total_price_Strong {
	color: rgb(60, 69, 75);
	font-family: Noto Sans SC;
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 1.0666667222976685px;
	text-align: left;
	text-transform: uppercase;
}
.total_price_Money {
	color: rgb(250, 94, 105);
	font-family: Montserrat;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: right;
}
/* 我的订单-总计end */
</style>
